<template>
	<u-popup :show="value" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
		close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
		<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange"
			ref="tabs"></u-tabs>
		<view class="area-box">
			<view class="u-flex" :class="{ 'change':isChange }">
				<view class="area-item" v-for="(list,subIndex) in colums" :key="subIndex">
					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
						<scroll-view :scroll-y="true" style="height: 100%">
							<u-cell-group>
								<u-cell v-for="(item,index) in list" :title="item.text" :arrow="false" :index="index"
									:key="index" @click="onChange(item,index)">
									<u-icon v-if="colIndex[subIndex]===index" slot="right-icon" size="24"
										name="checkbox-mark"></u-icon>
								</u-cell>
							</u-cell-group>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	var app = getApp();
	/**
	 * city-select 省市区级联选择器
	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
	 * @property {String} default-region 默认选中的地区，中文形式
	 * @property {String} default-code 默认选中的地区，编号形式
	 */
	export default {
		name: 'u-city-select',
		props: {
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
			defaultRegion: {
				type: Array,
				default () {
					return [];
				}
			},
			// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
			areaCode: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			num: {
				type: Number,
				default: 2
			},
			isAgent: {
				type: Number,
				default: 0
			}

		},
		data() {
			return {
				cityValue: "",
				isChooseP: false, //是否已经选择了省
				tabsIndex: 0,
				proIndex: 0,
				colums: [],
				columsAll: [],
				colIndex: [],
				cityType: ['province', 'city', 'area', 'street'],
				genTabsList: [{
					name: "请选择"
				}]
			}
		},
		mounted() {
			var url = app.globalData.pre_url + '/static/area.json';
			var that = this;
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: function(res) {
					if (res.data) {
						var data = res.data;
						app.$set(that.columsAll, 0, data);
						that.columsAll.forEach((item) => {
							item['type'] = 'province'
							that.colums.push(item)
						})
						console.log('colums', that.colums)
					}
				}
			});

		},
		computed: {
			isChange() {
				return this.tabsIndex > 1;
			},
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		watch: {
			num() {
				this.inits();
			}
		},
		methods: {
			inits() {
				this.colIndex = [];
				this.genTabsList = [{
					name: "请选择"
				}]
				this.tabsIndex = 0;
				this.colums.splice(1);
			},
			onChange(item, index) {

				const proIndex = this.cityType.indexOf(item.type);
				console.log(proIndex)
				if (proIndex == 0) {
					this.colIndex = [];
					this.genTabsList = [{
						name: "请选择"
					}]
					console.log(this.genTabsList)
					this.tabsIndex = 0;
				} else {
					this.colIndex.splice(proIndex + 1);
					this.colums.splice(proIndex + 1);
					this.genTabsList.splice(proIndex + 1);
					this.tabsIndex = proIndex;
				}
				const tabObj = item
				console.log('item', item)
				this.$set(this.colIndex, proIndex, index)
				this.$set(this.genTabsList, proIndex, tabObj)

				if (proIndex === this.num) {
					let result = {};
					result = this.genTabsList;
					this.$emit('city-change', result);
					this.close();
					return;
				}

				const keyIndex = +proIndex + 1;
				this.$set(this.genTabsList, keyIndex, {
					name: "请选择"
				})

				var children = item.children

				if (children.length > 0) {
					this.tabsIndex = keyIndex;
					this.$set(this.colums, keyIndex, children);
				} else {

					let list = this.colums[proIndex];
					list.map(e => {
						e.type = this.cityType[keyIndex];
					})
					this.tabsIndex = keyIndex;
					this.$set(this.colums, keyIndex, list);
				}

			},
			init() {
				if (this.areaCode.length == 3) {
					this.setProvince("", this.areaCode[0]);
					this.setCity("", this.areaCode[1]);
					this.setArea("", this.areaCode[2]);
				} else if (this.defaultRegion.length == 3) {
					this.setProvince(this.defaultRegion[0], "");
					this.setCity(this.defaultRegion[1], "");
					this.setArea(this.defaultRegion[2], "");
				};
			},
			setProvince(label = "", value = "") {
				this.provinces.map((v, k) => {
					if (value ? v.value == value : v.name == label) {
						this.provinceChange(k);
					}
				})
			},
			setCity(label = "", value = "") {
				this.citys.map((v, k) => {
					if (value ? v.value == value : v.name == label) {
						this.cityChange(k);
					}
				})
			},
			setArea(label = "", value = "") {
				this.areas.map((v, k) => {
					if (value ? v.value == value : v.name == label) {
						this.isChooseA = true;
						this.area = k;
					}
				})
			},
			close() {
				this.$emit('input', false);
			},
			tabsChange(index) {
				this.tabsIndex = index.index;
			},
			provinceChange(index) {
				this.$requestAll.default.getCity({
					pid: this.provinces[index].id,
					type: "province"
				}).then(res => {

					this.isChooseP = true;
					this.isChooseC = false;
					this.isChooseA = false;
					this.province = index;
					this.citys = res.data.data;
					this.tabsIndex = 1;
					console.log(this.citys)
				}).catch(res => {

				})



			},
			cityChange(index) {
				this.$requestAll.default.getCity({
					pid: this.citys[index].id,
					type: "city"
				}).then(res => {
					this.isChooseC = true;
					this.isChooseA = false;
					this.city = index;
					this.areas = res.data.data;
					this.tabsIndex = 2;
				}).catch(res => {

				})
			},
			areaChange(index) {
				this.isChooseA = true;
				this.area = index;

				let result = {};
				result.province = this.provinces[this.province];
				result.city = this.citys[this.city];
				result.area = this.areas[this.area];
				this.$emit('city-change', result);
				this.close();
			},
			streetChange(index) {
				this.isChooseD = true;
				this.area = index;
				let result = {};
				result.province = this.provinces[this.province];
				result.city = this.citys[this.city];
				result.area = this.areas[this.area];
				result.steet = this.streets[this.street];
				this.$emit('city-change', result);
				this.close();
			}
		}

	}
</script>
<style lang="scss">
	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;

		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 33.3333333%;
			height: 800rpx;
		}
	}

	.u-flex {
		display: flex;
	}
</style>